<template>
  <div class="mvdetail">
      <div class="mv-top">
          <div class="mv">MV</div>
          <div class="mv-name">{{song.name}}</div>
          <div class="singer">{{song.artistName}}</div>
      </div>
      <div class="video">
          <video :src="mv.url" controls></video>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            mv:[],
            song:[]
        }
    },
    mounted() {
        var {id} = this.$route.query
        this.$http.get(`/mv/url?id=${id}`).then(res=>{
            // console.log(res);
            this.mv = res.data.data
        this.$http.get(`/mv/detail?mvid=${id}`).then(res=>{
            // console.log(res);
            this.song = res.data.data
        })
        })
    },
}
</script>

<style scoped>
.mvdetail {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
}
.mv-top {
    margin-left: 150px;
    display: flex;
    align-items: flex-end;
}
.mv {
    padding: 10px 10px;
    background-color: powderblue;
}
.mv-name {
    font-size: 24px;
    margin-left: 20px;
}
.singer {
    margin-left: 10px;
}
.video {
    width: 900px;
    padding-top: 30px;
    height: 500px;
    /* background-color: silver; */
    margin: 0 auto;
}
.video video {
    /* width: 900px; */
    height: 500px;
}
</style>